<template>
  <view class="page-user">
    <view class="top">
      <view class="avatar">
        <image src="http://www.xinchengai.top:443/nan.png" mode="aspectFill"></image>
      </view>
      <view class="info">
        <text class="name">
          {{ userInfo?.userinfo?.name }}
        </text>
        <text class="job">{{ jobMap[userInfo?.type || "student"] }}</text>
      </view>
      <view class="school">
        <view class="col-l"> 学校：{{ userInfo?.userinfo?.school }} </view>
        <view class="col-r"> 班级：{{ `${userInfo?.userinfo?.class}年级${userInfo?.userinfo?.grade}班` }} </view>
      </view>
    </view>
    <view class="middle">
      <view class="row" v-for="(item, index) in (reportInfo || {}).data1 || []" :key="index">
        <view class="col-l">{{ item.key }}</view>
        <view class="col-r" v-if="item.value">{{ item.value }}</view>
      </view>
      <button class="ui-btn" @click="goPage('/pages/report/index')">查看报告</button>
    </view>
    <view class="bottom">
      <navigator class="row" target="miniProgram" open-type="navigate" app-id="wx8abaf00ee8c3202e" :extra-data="{ id: '613425' }" version="release">
        联系客服
        <van-icon class="icon" name="manager" />
      </navigator>
      <view class="row">
        意见反馈
        <van-icon class="icon" name="comment" />
      </view>
      <view class="row" @click="goPage('/pages/rule/index')">
        小程序法规
        <van-icon class="icon" name="wap-home" />
      </view>
      <view class="row">
        声明
        <van-icon class="icon" name="volume" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { latestReport } from "@/api";

const userInfo = ref();
const reportInfo = ref();

const jobMap = {
  student: "学生",
  teacher: "老师",
  parent: "家长",
};

const getReport = () => {
  latestReport().then((res) => {
    reportInfo.value = res;
  });
};

const goPage = (url) => {
  uni.navigateTo({
    url,
  });
};

onShow(() => {
  userInfo.value = uni.getStorageSync("userInfo");
  getReport();
});
</script>

<style lang="scss">
.page-user {
  display: flex;
  flex-direction: column;
  position: relative;
  .top {
    height: 660rpx;
    background-image: linear-gradient(45deg, #f4ede1, #e5c799);
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: 0.1);
    .avatar {
      width: 200rpx;
      height: 200rpx;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 auto;
      border: 4rpx solid #fff;
      box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: 0.1);
      image {
        width: 100%;
        height: 100%;
      }
    }
    .info {
      margin-top: 20rpx;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .name {
        font-size: 48rpx;
        font-weight: bold;
        color: #fff;
      }
      .job {
        font-size: 24rpx;
        color: #fde6d3;
      }
    }
    .school {
      display: flex;
      justify-content: space-between;
      height: 120rpx;
      align-items: center;
      border-radius: 20rpx;
      background: #f4ede1;
      box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: 0.1);
      color: #c06318;
      font-size: 36rpx;
      margin: 0 40rpx;
      box-sizing: border-box;
      padding: 0 40rpx;
      margin-top: 20rpx;
    }
  }
  .middle {
    background-image: linear-gradient(45deg, #ffc2af, #fb835d);
    border-radius: 20rpx;
    box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: 0.1);
    padding: 0 40rpx;
    box-sizing: border-box;
    margin: 40rpx 10px;
    .row {
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 40rpx;
      .col-l {
        color: #fff;
        font-size: 60rpx;
        font-weight: bold;
      }
      .col-r {
        padding: 0 30rpx;
        height: 80rpx;
        border-radius: 80rpx;
        line-height: 80rpx;
        background: #fff;
        color: #c06318;
        font-size: 40rpx;
        font-weight: bold;
      }
    }
    .ui-btn {
      background-image: linear-gradient(45deg, #fb835d, #ec4a34);
      font-size: 52rpx;
      color: #fff;
      margin: 40rpx 0;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .bottom {
    background: rgba($color: #b69e88, $alpha: 0.6);
    box-sizing: border-box;
    padding: 40rpx 40rpx 20rpx 40rpx;
    display: flex;
    flex-wrap: wrap;
    .row {
      width: 50%;
      color: #b69e88;
      font-weight: 46rpx;
      margin-bottom: 20rpx;
      display: flex;
      align-items: center;
      .icon {
        width: 40rpx;
        height: 40rpx;
        display: block;
      }
    }
  }
}
</style>
